<template>
  <view>
    <!-- 导航 -->
    <custom-nav></custom-nav>
    <template v-if="curPage == 1">
      <view class="register-title">您的手机号码</view>
      <view class="sub-title">方便亲家联系您</view>
    </template>

    <view class="register-title" v-else>验证码已发送</view>

    <uni-forms ref="baseForm" class="v-form" :modelValue="alignmentFormData">
      <uni-forms-item v-if="curPage == 1">
        <view class="v-input-box">
          <input v-model="baseFormData.phone" class="v-input" focus placeholder="请填写您的手机号" @input="inputFormat('phone')" />
        </view>
      </uni-forms-item>
      <uni-forms-item v-else>
        <view class="v-input-box">
          <input v-model="baseFormData.code" placeholder="输入验证码" @input="inputFormat('code')" />
          <view class="r-code" @click="getCode" v-if="!showCount"><custom-btn>获取验证码</custom-btn></view>
          <view class="r-code count-text" v-else>{{countNum}}s</view>
        </view>
      </uni-forms-item>
      <uni-forms-item>
        <view class="r-btn" :class="activeBtn ? 'active' : ''" @click="submitFn"><custom-btn>确定</custom-btn></view>
      </uni-forms-item>

      <uni-forms-item v-if="curPage == 1">
        <view class="r-tips" ref="animationRef">
          <uni-icons type="checkbox-filled" color="#FF5C55" size="20" @click="checkFn" v-if="isChecked"></uni-icons>
          <uni-icons type="circle" color="#FF5C55" size="20" @click="checkFn" v-else></uni-icons>
          <text>我已阅读并同意</text>
          <navigator url="/subPages/settings/privacy?type=1" style="color:#ff5c55">
            《用户使用协议》
          </navigator>
          <text>和</text>
          <navigator url="/subPages/settings/privacy?type=3" style="color:#ff5c55">
            《隐私政策》
          </navigator>
        </view>
        <image :src="urlConf + 'common/tips.svg'" mode="heightFix" class="r-img"></image>

      </uni-forms-item>
    </uni-forms>

  </view>
</template>
 
<script setup>
import { urlConf } from "@/config/resource";
import { sendSmsCode } from "@/api/my";
import { fetchUserPhone } from "@/api/app";
import { setItem } from "@/utils/storage";
const curPage = ref(1);
const animationRef = ref();
const alignmentFormData = reactive({});
const baseFormData = reactive({});
const isChecked = ref(true);
const countNum = ref(60);
const showCount = ref(false);
const btnLoding = ref(false);
const resCode = ref("");

const activeBtn = computed(() => {
  if (curPage.value == 1) return baseFormData.phone && isChecked.value;
  if (curPage.value == 2) return baseFormData.code;
});

const checkFn = () => {
  isChecked.value = !isChecked.value;
};

// 输入框格式校验
const inputFormat = (t) => {
  const inputTypeNum = /[^\d]/g; //数字
  nextTick(() => {
    baseFormData[t] = baseFormData[t].replace(inputTypeNum, "");
  });
};

// 验证手机号
const mobileFormat = (phone) => {
  let flag = true;
  if (!phone) {
    uni.showToast({
      title: "请输入手机号",
      icon: "none",
    });
    flag = false;
  }

  const reg = /^1\d{10}$/;
  if (!reg.test(phone)) {
    uni.showToast({
      title: "请输入正确的手机号",
      icon: "none",
    });
    flag = false;
  }
  return flag;
};

// 获取验证码
const getCode = () => {
  const phone = baseFormData.phone;
  const resFlag = mobileFormat(phone);
  if (!resFlag) return;

  if (btnLoding.value) return;
  btnLoding.value = true;
  sendSmsCode({ phone })
    .then((res) => {
      btnLoding.value = false;
      if (res.code == 2) {
        uni.showToast({
          title: res.msg,
          icon: "none",
        });
        return;
      }
      curPage.value = 2;
      showCount.value = true;
      resCode.value = res.data;
      timerFn();
    })
    .catch((err) => {
      btnLoding.value = false;
    });
};

// 倒计时
const timerFn = () => {
  countNum.value = 59;
  const timer = setInterval(() => {
    countNum.value--;
    if (countNum.value <= 0) {
      countNum.value = 59;
      showCount.value = false;
      clearInterval(timer);
    }
  }, 1000);
};

// 提交
const submitFn = () => {
  if (curPage.value == 1) {
    if (!isChecked.value) {
      uni.showToast({
        title: "请先阅读并同意底部协议",
        icon: "none",
      });
      return;
    }
    const resFlag = mobileFormat(baseFormData.phone);
    if (!resFlag) return;

    getCode();
  } else {
    if (!baseFormData.code) {
      uni.showToast({
        title: "请输入验证码",
        icon: "none",
      });
      return;
    }
    if (resCode.value != baseFormData.code) {
      uni.showToast({
        title: "验证码错误",
        icon: "none",
      });
      return;
    }

    updateUserInfo();
  }
};

// 更新保存信息
const updateUserInfo = () => {
  if (btnLoding.value) return;
  btnLoding.value = true;

  fetchUserPhone({ phone: baseFormData.phone })
    .then((res) => {
      btnLoding.value = false;
      setItem("initGiftStatus", true);
      const len = getCurrentPages().length;
      nextTick(() => {
        uni.navigateBack({ delta: len });
      });
    })
    .catch((err) => {
      btnLoding.value = false;
      uni.showToast({
        title: err,
        icon: "none",
      });
    });
};
onUnload(() => {
  setItem("lastPage", "subPages/verify/index");
});
</script>
 
<style lang='scss' scoped>
.register-title {
  padding: 100rpx 50rpx 20rpx;
  @include registerTitle;
}
.sub-title {
  padding: 0 50rpx;
  font-size: 48rpx;
  padding-bottom: 60rpx;
}

.v-input-box {
  // width: 570rpx;
  height: 140rpx;
  background: #f5f5f5;
  border-radius: 100rpx;
  font-size: 40rpx;
  margin: 0 70rpx;
  padding: 0 40rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.v-input {
  width: 100%;
  height: 100%;
  &::placeholder {
    color: $uni-text-color-grey;
  }
}

.r-code {
  width: 240rpx;
  height: 80rpx;
  line-height: 80rpx;
  font-size: 28rpx;
  font-weight: 600;
  color: #ffffff;
  background: #ff5c55;
  text-align: center;
  border-radius: 120rpx;
}

.count-text {
  background: #ccc !important;
}
.r-btn {
  width: 610rpx;
  height: 140rpx;
  line-height: 140rpx;
  background: #ff5c55;
  color: #fff;
  border-radius: 120rpx;
  font-size: 40rpx;
  font-weight: bold;
  margin: 0 auto;
  opacity: 0.2;
}
.active {
  opacity: 1;
}

.r-tips {
  @include flexAlignCenter;
  justify-content: center;
  font-size: 24rpx;
  color: $uni-text-color;
}

.r-img {
  height: 160rpx;
  margin: 80rpx 92rpx 0;
}

.popup-content {
  width: 650rpx;
  height: 800rpx;
  position: relative;
  .g-btn {
    width: 400rpx;
    height: 120rpx;
    line-height: 120rpx;
    background: linear-gradient(180deg, #fefbd3 0%, #ffdd47 100%);
    box-shadow: 0rpx 20rpx 40rpx 0rpx rgba(241, 55, 64, 0.25);
    border-radius: 120rpx;
    font-size: 48rpx;
    color: #eb3130;
    font-weight: bold;
    position: absolute;
    left: 120rpx;
    bottom: 80rpx;
  }
}
</style>